<template>
  <div class="profile-container">
    <div class="operation">
      <el-form size="medium" :inline="true" v-model="conditions">
        <el-form-item label="订单号">
          <el-input placeholder="请输入订单号" v-model="conditions.id"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="conditions.status" placeholder="请选择状态" clearable>
            <el-option label="已下单" value="0"></el-option>
            <el-option label="已发货" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="pageByCond()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table">
      <el-card class="box-card">
        <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="id" label="订单号" width="220"> </el-table-column>
          <el-table-column prop="totalPrice" label="总金额" width="150">
            <template slot-scope="scope">
              ¥{{ scope.row.totalPrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="收货地址" width="220"> </el-table-column>
          <el-table-column prop="status" label="状态" width="150">
            <template slot-scope="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" style="margin-right: 10px" @click="handleViewDetail(scope.row)">详情</el-button>

              <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
                <el-button size="mini" type="danger" slot="reference">删除</el-button>
              </el-popconfirm>
              <el-button v-if="scope.row.status == 0" size="mini" type="success" style="margin-left: 10px"
                @click="handleSend(scope.row)">发货</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="pagination">
      <el-pagination background layout="sizes,total, prev, pager, next,jumper" :current-page="pagination.currentPage"
        :page-sizes="[5]" :page-size="pagination.pageSize" :total="pagination.total"
        @current-change="handleCurrentChange" @size-change="handleSizeChange">
      </el-pagination>
    </div>

    <div class="dialog">
      <el-dialog title="订单详情" :visible.sync="detailDialogVisible" width="50%">
        <el-card shadow="never" v-if="currentOrder">
          <div class="item">
            <div class="title">
              <div class="div">订</div>
              <div class="div">单</div>
              <div class="div">号</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="currentOrder.id" disabled></el-input>
            </div>
          </div>

          <div class="item">
            <div class="title">
              <div class="div">客</div>
              <div class="div">户</div>
              <div class="div">姓</div>
              <div class="div">名</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="currentOrder.user.nickname"></el-input>
            </div>
          </div>

          <!-- <div class="item">
            <div class="title">
              <div class="div">下</div>
              <div class="div">单</div>
              <div class="div">时</div>
              <div class="div">间</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="currentOrder.createTime" disabled></el-input>
            </div>
          </div> -->

          <div class="item">
            <div class="title">
              <div class="div">总</div>
              <div class="div">金</div>
              <div class="div">额</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="currentOrder.totalPrice" disabled>
                <template slot="prefix">¥</template>
              </el-input>
            </div>
          </div>

          <div class="item">
            <div class="title">
              <div class="div">状</div>
              <div class="div">态</div>
            </div>
            <div class="value">
              <el-tag :type="getStatusTagType(currentOrder.status)">
                {{ getStatusText(currentOrder.status) }}
              </el-tag>
            </div>
          </div>

          <div class="item">
            <div class="title">
              <div class="div">地</div>
              <div class="div">址</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="currentOrder.address"></el-input>
            </div>
          </div>

          <!-- <div class="item">
            <div class="title">
              <div class="div">备</div>
              <div class="div">注</div>
            </div>
            <div class="value">
              <el-input style="width: 200px" v-model="currentOrder.remark"></el-input>
            </div>
          </div> -->

          <h3 style="margin: 20px 0 10px;">订单商品</h3>
          <el-table :data="currentOrder.orderItemList" border style="width: 100%">
            <el-table-column prop="product.name" label="商品名称"></el-table-column>
            <el-table-column prop="product.image" label="商品图片">
              <template slot-scope="scope">
                <el-image :src="getImageUrl(scope.row.product.imageId)" fit="contain"
                  style="width: 60px; height: 60px; margin-right: 10px;"></el-image>
              </template>

            </el-table-column>
            <el-table-column prop="product.price" label="单价" width="120">
              <template slot-scope="scope">
                ¥{{ scope.row.product.price }}
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
            <el-table-column label="小计" width="120">
              <template slot-scope="scope">
                ¥{{ (scope.row.product.price * scope.row.quantity) }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <span slot="footer" class="dialog-footer">
          <el-button @click="detailDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrder()">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      tableData: [],
      conditions: {
        orderNo: '',
        customerName: '',
        status: ''
      },
      pagination: {
        pageSize: 5,
        currentPage: 1,
        total: 0
      },
      detailDialogVisible: false,
      currentOrder: null
    }
  },
  created() {
    this.pageByCond()
  },
  methods: {
    getImageUrl(imageId) {
      return `http://localhost:8000/api/files/download/${imageId}`
    },
    getStatusText(status) {
      const statusMap = {
        0: '已下单',
        1: '已发货',
      }
      return statusMap[status] || '未知状态'
    },
    getStatusTagType(status) {
      const typeMap = {
        0: 'warning',
        1: 'primary',
        2: 'success',
        3: 'danger'
      }
      return typeMap[status] || ''
    },
    pageByCond() {
      // 模拟API调用
      this.$api.order.pageByCond(
        this.pagination.currentPage,
        this.pagination.pageSize,
        this.conditions
      ).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.pageByCond()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pageByCond()
    },
    handleSend(row) {
      this.$api.order.send(row.id).then(res => {
        if (res.code === 200) {
          this.$message.success('发货成功')
          this.pageByCond()
        }
      })
    },
    handleViewDetail(row) {
      this.$api.order.getById(row.id).then(res => {
        if (res.code === 200) {
          this.currentOrder = res.data
          this.detailDialogVisible = true
        }
      })
    },
    handleDelete(row) {
      this.$api.order.remove(row.id).then(res => {
        if (res.code === 200) {
          this.$message.success('删除成功')
          this.pageByCond()
        }
      })
    },
    saveOrder() {
      this.$api.order.updateById(this.currentOrder).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功')
          this.detailDialogVisible = false
          this.pageByCond()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  .operation {
    .el-form {
      .el-form-item {
        margin: 0 20px 0 0;

        &:first-child {
          margin-left: 30px;
        }
      }
    }
  }

  .table {
    margin: 20px 0;

    .el-card {
      height: 375px;
    }
  }

  .dialog {
    .el-card {
      background-color: white;
      border: 0;
      border-radius: 0;
      margin-bottom: 10px;
    }

    .item {
      position: relative;
      height: 40px;
      display: flex;
      margin-bottom: 10px;

      &:last-child {
        margin: 0;
      }

      .title {
        display: flex;
        width: 64px;
        justify-content: space-between;
        margin-right: 40px;
        align-items: center;
      }

      .value {
        line-height: 40px;

        .el-tag {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>